import { Outlet } from "react-router-dom";
import { Layout, Spin } from "antd";
import styles from "./MainLayout.module.scss";
import Logo from "../../components/Logo";
import UserInfo from "../../components/UserInfo";
import useLoadUserData from "../../hooks/useLoadUserData";
import useNavPage from "../../hooks/useNavPage";
const { Header, Content, Footer } = Layout;
export default function MainLayout() {
  const { waitingUserData } = useLoadUserData();
  useNavPage(waitingUserData);
  return (
    <Layout>
      <Header className={styles.header}>
        <div className={styles.left}>
          <Logo />
        </div>
        <div className={styles.right}>
          <UserInfo />
        </div>
      </Header>
      <Layout className={styles.main}>
        <Content>{waitingUserData ? <Spin /> : <Outlet />}</Content>
      </Layout>

      <Footer className={styles.footer}>小沐问卷；2025- present</Footer>
    </Layout>
  );
}
